<template>
    <div class="spinView" v-if="loading">
        <a-spin />
    </div>
    <a-config-provider :locale="zhCN">
        <a-layout>
            <a-layout-sider width="320" class="sider">
                <img class="titleImage" src="./assets/title.png" alt="">
                <div class="PluginList scroll">
                    <Appitem :class="{'active': item == ActiveObject }" v-for="item in Apps" :detail="item" @click="changeApp(item)" />
                    <div class="AppItem" @click="addApp">
                        <img src="./assets/add.jpg" alt="">
                        <div class="titleBox">
                            <span class="title">添加插件</span>
                        </div>
                    </div>
                </div>
            </a-layout-sider>
            <a-layout>
                <a-layout-content style="padding:20px;" class="scroll">
                    <Content ref="ContentView" />
                </a-layout-content>
                <a-layout-footer v-if="showSubmit" style="background-color:#FFF">
                    <div style="width:1000px">
                        <a-button type="primary" style="float:right" @click="SaveApp">创建 APP</a-button>
                    </div>
                </a-layout-footer>
            </a-layout>
        </a-layout>
    </a-config-provider>
</template>
<script setup>
import zhCN from 'ant-design-vue/es/locale/zh_CN';
import Appitem from './compontents/AppItem.vue'
import Content from './compontents/Content.vue'
import { ref, onMounted } from 'vue';
// import axios from 'axios';

import apis from './compontents/apis'

const Apps = ref([]);
const ContentView = ref(null);
const ActiveObject = ref({});
const showSubmit = ref(false);
const loading = ref(false);


const getApp = () => {
    apis.GetApps().then(res => {
        Apps.value = res.data;
    });
}

getApp();

const addApp = () => {
    showSubmit.value = true;
    ActiveObject.value = {};
    ContentView.value.SetContentValue({
        icon: null,
        key: '',
        description: '',
        width: 800,
        height: 600,
        version: [],
    })
};

const changeApp = (item) => {
    showSubmit.value = false;
    ActiveObject.value = item;
    apis.GetApp(item.key).then(res => {
        var _data = {
            ...item,
            icon: apis.basePath + item.icon,
            width: res.data.config.minWidth,
            height: res.data.config.minHeight,
            version: res.data.index,
        }
        ContentView.value.SetContentValue(_data);
    });
}

const SaveApp = () => {
    loading.value = true;
    ContentView.value.getContentValue((item) => {
        apis.CreateApp(item).then(res => {
            loading.value = false;
            getApp();
            addApp();
        });
    });
}

onMounted(() => {
    addApp();
})



</script>

<style scoped>
.ant-layout {
    height: 100%;
}

:deep(.ant-layout-footer) {
    padding: 10px 20px;
}

.spinView {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 9;
    text-align: center;
    padding-top: 25%;
    background-color: rgba(0, 0, 0, 0.3);
}

.titleImage {
    width: 250px;
    display: block;
    margin: 10px auto;
}
.sider {
    position: relative;
}
.PluginList {
    position: absolute;
    top: 120px;
    bottom: 0px;
    width: 100%;
}

.AppItem {
    position: relative;
    border-radius: 10px;
    margin: 10px;
    cursor: pointer;
}

.AppItem img {
    border-radius: 10px;
    margin: 7px;
    width: 60px;
}

.titleBox {
    position: absolute;
    color: #fff;
    top: 10px;
    left: 77px;
}
.titleBox .title {
    font-size: 17px;
    font-weight: bold;
    line-height: 50px;
}
</style>